<template>
	<view class="wrapp">
		<view class='head'>
			<view class='headLeft headCom'>
				<text class='headComTitel'>当前设备数</text>
				<view class='headInfo'>
					<text class='headComNum'>在线数(台)</text>
					<text class='headComValue'>{{deviceDetail.onlineMinerCount}}</text>
				</view>
			</view>
			<view class='headRight'>
				<text class='headComTitel' style='text-align:right'>{{deviceDetail.minerCount}}</text>
				<view class='headInfo'>
					<text class='headComNum' style='text-align:right'>离线数(台)</text>
					<text class='headComValue'>{{deviceDetail.offlineMinerCount}}</text>
				</view>
			</view>
		</view>
		<view class='banner'>
			<view class='bannerTable'>
				<view class='tableTitle'>
					<text class='titleLeft'>设备</text>
					<text class='titleCenter'>状态</text>
					<text class='titleRight'>地址</text>
				</view>

				<navigator class='tableList' v-for="(item,index) in deviceList" :key="index" :url="'/pages/minerDetail/minerDetail?minerId='+item.minerId">
					<text class='titleLeft'>{{item.minerNo == null ? '' : item.minerNo}}</text>
					<text class='titleCenter_1'>{{item.runningStatusName}}</text>
					<text class='titleRight'>{{item.address == null ? '' : item.address}}</text>
				</navigator>

				<view class='more' @tap='loadMore'>{{bottomTitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../common/apis.js";
	import message from "../../common/message.js";
	import util from "../../common/util.js"
	export default {
		data() {
			return {
				deviceList: [],
				deviceDetail: {
					onlineMinerCount: '',
					minerCount: '',
					offlineMinerCount: '',
				},
				pageSize: 20,
				pageNum: 0,
				bottomTitle: '点击加载更多'
			};
		},
		onLoad: function(options) {
			this.getDeviceData();
			this.getDeviceList(0)
			uni.startPullDownRefresh()
		},
		onPullDownRefresh: function() {
			this.pageNum = 0;
			this.getDeviceList(this.pageNum);
		},
		onReachBottom: function() {
			if (this.bottomTitle === '无更多数据') {
				return
			}
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.bottomTitle === '无更多数据') {
					return
				}
				let temp = this.pageNum;
				temp += 1;
				this.pageNum = temp;                  
				this.getDeviceList(temp)
			},    
			getDeviceData() {
				let token = uni.getStorageSync("authorization");        
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.deviceInfoHeadApi,
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh()
						if (res.statusCode == "200") {
							this.deviceDetail = res.data
							console.log(this.deviceDetail)
						} else {
							util.errHandler(res)
						}
					}
				});
			},
			getDeviceList(pageNum) {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.deviceListApi + "?" + "page=" + pageNum + "&size=" + this.pageSize,
					method: "get",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == "200") {
							if (res.data.length == 0) {
								this.bottomTitle = '无更多数据'
								return
							}
							if (this.pageNum == 0) {
								this.deviceList = []
							}
							res.data.forEach(element => {
								element.devId = util.hideWord(element.devId)
							})
							this.deviceList = res.data
							console.log(this.deviceList)
						} else {
							util.errHandler(res)
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* pages/miners/minerList.uniss */

	.wrapp {
		padding-top: 30px;
		background: rgba(245, 245, 245, 1);
		padding-bottom: 30px;
	}

	.head {
		width: 92.04%;
		height: 112px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.headLeft {
		margin-top: 16px;
		margin-left: 38px;
		float: left;
		margin-bottom: 14px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 82px;
	}

	.headInfo {
		width: 59px;
		display: flex;
		flex-direction: column;
	}

	.headComTitel {
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.headComNum {
		font-size: 12px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.headComValue {
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-top: 5px;
		text-align: center;
	}

	.headRight {
		margin-top: 16px;
		margin-right: 38px;
		float: right;
		margin-bottom: 14px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 82px;
	}

	.banner {
		width: 92.04%;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.bannerTable {
		width: 90%;
		margin: 0 auto;
		padding: 0 18px;
	}

	.tableTitle {
		height: 40px;
		border-bottom: 1px solid rgba(153, 153, 153, 0.3);
		line-height: 50px;
		display: flex;
		justify-content: space-between;
	}

	.titleLeft {
		width: 50px;
	}

	.titleRight {
		width: 50px;
		text-align: right;
	}

	.titleCenter {
		width: 50px;
		margin-left: 20%;
		text-align: center;
	}

	.tableList {
		height: 35px;
		border-bottom: 1px solid rgba(153, 153, 153, 0.3);
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.more {
		margin-top: 17px;
		font-size: 10px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-align: center;
		letter-spacing: 0.72px;
	}

	.titleCenter_1 {
		width: 50px;
		margin-left: 20%;
		text-align: center;
	}
</style>
